<script setup lang="ts">
import { ref } from "vue"
const hotTopicData = ref([
    {
        id: 1,
        text: '2024债务清零成功上岸',
    },
    {
        id: 2,
        text: '资深债友经验谈',
    },
    {
        id: 3,
        text: '负债XX万坦白局',
    },
    {
        id: 4,
        text: '债务转让给第三方怎么处',
    },
    {
        id: 5,
        text: '90后还债日常',
    },
    {
        id: 6,
        text: '......',
    },
])
const hotSpotData = ref([
    {
        id: 1,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 3,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 2,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 4,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 5,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
])

</script>
<template>
    <view class="hot-topic">
        <view class="hot-title">热门话题</view>
        <view class="topic-box">
            <view v-for="(item, index) in hotTopicData" :key="index" class="list-box">
                <view class="text-icon">#</view>
                <view class="text">{{ item.text }}</view>
            </view>
        </view>
    </view>
    <view class="hot-spot">
        <view class="hot-header">
            <view class="left">
                <view class="hot-title">热点解读</view>
            </view>
            <view class="right">
                <view class="circle">NEW</view>
            </view>
        </view>
        <view class="hot-box">
            <view v-for="(item, index) in hotSpotData" :key="index" class="list-box">
                <view class="time"><span class="date">{{ item.date }}</span>|{{ item.time }}</view>
                <view class="info-box">
                    <view class="title"><span class="platform">{{ item.platform }}</span>：{{ item.title }}</view>
                    <view class="minor-title">{{ item.minortitle }}：</view>
                    <view class="text">{{ item.text }}</view>
                    <view class="comment-box">
                        <view class="comment-list">
                            <img src="" alt="" class="user-img" />
                            <view class="comment">{{ item.comment }}</view>
                        </view>
                    </view>
                    <view class="footer">
                        <view class="num-box">
                            <veiw class="column">
                                <uni-icons type="eye" color="#cdcdcd" size="22"></uni-icons>
                                <view class="data-text">1万浏览量</view>
                            </veiw>
                            <veiw class="column">
                                <uni-icons type="chat" color="#cdcdcd" size="22"></uni-icons>
                                <view class="data-text">50评论</view>
                            </veiw>
                        </view>
                        <view class="feature-box">
                            <veiw class="feature-text">查看详情</veiw>
                            <uni-icons type="right" color="#F2BB16" size="25"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<style lang="scss">
.hot-topic {
    margin: 0 64rpx;
    padding: 0rpx;
    height: 300rpx;
    flex-wrap: wrap;
    align-items: center;
    align-items: center;

    .hot-title {
        width: 200rpx;
        height: 44rpx;
        font-size: 46rpx;
        font-family: STZhongsong, STZhongsong-400;
        font-weight: 400;
        color: #000000;
        line-height: 84rpx;
        background-image: linear-gradient(0deg, #f8d770 50%, rgba(0, 0, 0, 0) 50%);
        background-position: 60rpx;

    }


    .topic-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 18rpx 0;


        .list-box {
            display: flex;
            align-items: center;
            height: 58rpx;
            padding: 0rpx 12rpx;
            margin: 10rpx 0rpx;
            font-size: 26rpx;
            font-weight: 400;
            background: #fffefe;
            border-radius: 40rpx;
            box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

            .text-icon {
                width: 32rpx;
                height: 34rpx;
                color: #f3b600;
                text-align: center;
                font-weight: 950;
                background: #000000;
                border-radius: 50%;
            }

            .text {
                margin-left: 20rpx;
            }
        }

        .list-box:last-child {
            justify-self: flex-start;
        }
    }
}

.hot-spot {
    margin: 0 64rpx;

    .hot-header {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #fff;
        padding-bottom: 20rpx;

        .left {
            flex-grow: 1;

            .hot-title {
                width: 200rpx;
                height: 44rpx;
                font-size: 136rpx;
                font-family: STZhongsong, STZhongsong-400;
                font-weight: 400;
                color: #000000;
                line-height: 84rpx;
                background-image: linear-gradient(0deg, #f8d770 50%, rgba(0, 0, 0, 0) 50%);
                font-size: 46rpx;
            }
        }

        .right {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;

            .circle {
                width: 212rpx;
                height: 104rpx;
                font-size: 24px;
                font-family: STZhongsong, STZhongsong-400;
                font-weight: 400;
                text-align: center;
                line-height: 104rpx;
                color: rgba(245, 209, 100, 0.61);
                background: linear-gradient(0deg, #fffaec 0%, #ffffff);
                border-radius: 50%;
                box-shadow: 6rpx -22rpx 56.8rpx 0rpx rgba(245, 209, 100, 0.28) inset,
                    0rpx 8rpx 8rpx 0rpx rgba(155, 118, 9, 0.26), 0px -3px 4px 0px rgba(255, 255, 255, 0.38) inset;
                transform: translateY(5px);
            }
        }
    }

    .hot-box {
        .list-box {
            position: relative;
            overflow: visible;

            width: 582rpx;
            padding: 10rpx 0rpx;

            &::before {
                position: absolute;
                content: '';
                z-index: 9;
                width: 24rpx;
                height: 24rpx;
                margin: 6rpx 10rpx;
                border-radius: 50%;
                background-color: #000000;
            }

            &::after {
                position: absolute;
                content: '';
                width: 4rpx;
                height: 440rpx;
                top: 24rpx;
                left: 20rpx;
                bottom: -40rpx;
                background-color: #000000;
            }

            .time {
                margin: 0rpx 40rpx;
                height: 28rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                color: #000000;
                line-height: 38rpx;

                .date {
                    font-size: 32rpx;
                    font-weight: 550;
                }
            }

            .info-box {
                width: 526rpx;
                height: 336rpx;
                margin: 20rpx 56rpx;
                font-family: PingFang SC, PingFang SC-500;
                color: #333333;
                font-weight: 550;
                font-size: 22rpx;
                background: #fffefe;
                border-radius: 10px;
                box-shadow: 0px 8rpx 8rpx 0px rgba(0, 0, 0, 0.25);

                .title {
                    padding: 42rpx 0rpx 24rpx 50rpx;
                    font-size: 32rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 550;
                    line-height: 38rpx;

                    .platform {
                        color: #f2bb16;
                    }
                }

                .minor-title {
                    margin: 0px 50rpx;
                    line-height: 30rpx;
                    letter-spacing: 0.08rpx;
                }

                .text {
                    width: 428rpx;
                    height: 60rpx;
                    margin: 24rpx 0rpx 14rpx 50rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    letter-spacing: 0.08rpx;
                    overflow-wrap: break-word;
                    white-space: break-spaces;
                    line-height: 30rpx;
                }

                .comment-box {
                    display: flex;
                    margin: 0px 50rpx;

                    .comment-list {
                        position: relative;
                        display: flex;
                        align-items: center;
                        height: 34rpx;
                        overflow: hidden;

                        .user-img {
                            position: absolute;
                            width: 34rpx;
                            height: 34rpx;
                            border-radius: 50%;
                            overflow: hidden;
                            background-color: azure;
                        }

                        .comment {
                            width: 184rpx;
                            height: 28rpx;
                            margin: 0rpx 14rpx;
                            background: #f1f1f1;
                            border-radius: 30rpx;
                            font-size: 20rpx;
                            font-family: PingFang SC, PingFang SC-500;
                            font-weight: 500;
                            text-align: CENTER;
                            color: #333333;
                            line-height: 24rpx;
                        }
                    }
                }

                .footer {
                    display: flex;
                    align-items: center;
                    height: 26rpx;
                    margin: 20rpx 0rpx 0rpx 50rpx;

                    .num-box {
                        display: flex;
                        justify-content: space-between;

                        .column {
                            display: flex;
                            align-items: center;
                            margin: 0rpx 20rpx 0rpx 0rpx;

                            .icon {
                                margin: 0rpx 10rpx;
                            }

                            .data-text {
                                height: 24rpx;
                                font-size: 20rpx;
                                font-family: PingFang SC, PingFang SC-500;
                                font-weight: 500;
                                text-align: CENTER;
                                color: #cdcdcd;
                                line-height: 24rpx;
                            }
                        }
                    }

                    .feature-box {
                        display: flex;
                        flex-grow: 1;
                        align-items: center;
                        justify-content: flex-end;
                        margin: 0rpx 50rpx 0rpx 0rpx;

                        .feature-text {
                            font-size: 20rpx;
                            font-family: PingFang SC, PingFang SC-500;
                            font-weight: 500;
                            text-align: CENTER;
                            color: #f2bb16;
                            line-height: 24rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>